<template>
  <div id="dialog" v-loading="loading">
    <div class="dialog-task-info">
      <el-card class="box-card" shadow="never" >
        <el-descriptions :colon="false" :column="3">
          <el-descriptions-item label="任务名称：">{{
            form.taskName
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :colon="false" :column="3">
          <el-descriptions-item label="开始时间：">{{
            form.startDate
          }}</el-descriptions-item>
          <el-descriptions-item label="结束时间：">{{
            form.endDate
          }}</el-descriptions-item>
          <el-descriptions-item label="工期：">{{
            form.duration
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions :colon="false" :column="1">
          <el-descriptions-item label="指派给：">{{
            form.assignUserName
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions :colon="false" :column="1">
          <el-descriptions-item label="协作人：">{{
            form.collaboratorUserNames
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions :colon="false" :column="1">
          <el-descriptions-item label="进度：">
            <el-slider
              style="width: 100%"
              v-model="form.progress"
              :marks="progressMarks"
              @change="handleProgressChange"
              show-input
            >
            </el-slider>
          </el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <el-descriptions :colon="false" :column="1">
          <el-descriptions-item label="任务描述：">
            <div class="ql-editor" v-html="form.description"></div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <ul class="dialog-comment-info">
      <li v-for="row in commentList" class="infinite-list-item">
        <div class="comment-left">
          <el-avatar shape="square" :size="40">
            {{ userLogo }}
          </el-avatar>
        </div>
        <div class="comment-right">
          <div class="comment-right-title">
            <span style="color: #606266">{{ row.userName }} </span>
            <span style="color: #909399; margin-left: 10px">
              {{ row.createTime }}</span
            >
          </div>
          <div class="comment-right-body">
            <div class="ql-editor" v-html="row.content"></div>
          </div>
          <div class="comment-right-footer">
            <el-button
              style="font-size: small; color: #409eff"
              @click="handleDeleteComment(row)"
              type="text"
              v-hasPermi="['pms:project:delete']"
            >
              删除
            </el-button>
          </div>
        </div>
      </li>
    </ul>

    <div class="dialog-comment-input">
      <div class="comment-left">
        <el-avatar shape="square" :size="40">
          {{ userLogo }}
        </el-avatar>
      </div>
      <div class="comment-right">
        <editor v-model="comment" :height="192" />
        <br />
        <el-button type="primary" style="width: 100px" @click="commentSubmit"
          >备注</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getTask, updateProgress } from "@/api/pms/project/task";
import {detailResources, listResources} from "@/api/pms/project/resources";
import {
  deleteComment,
  listComment,
  saveComment,
} from "@/api/pms/project/comment";
import moment from "moment";
export default {
  name: "taskProcess",
  props: {
    // 定义一个名为id的prop，类型为String
    taskId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      taskProcessVisible: false,
      form: {},
      comment: "",
      commentList: [],
      progressMarks: {
        0: "",
        10: "开始",
        20: "分析",
        30: "设计",
        40: "开发",
        80: "测试",
        90: "发布",
        100: "",
      },
      userLogo: undefined,
      loading: true,
    };
  },
  created() {
    this.initTask();
  },
  methods: {
    handleProgressChange() {
      let oldProgress = this.form.progress
      this.$confirm("确认要更新进度吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let dm = {};
          dm.id = this.form.id;
          dm.progress = this.form.progress;
          updateProgress(dm)
            .then((response) => {
              this.$message({
                type: "success",
                message: "进度更新成功!",
              });
            })
            .catch((error) => {
              // 处理更新进度时的错误
              this.$message({
                type: "error",
                message: "进度更新失败: " + error.message,
              });
            });
        })
        .catch(() => {
          this.form.progress = oldProgress
          // 当用户点击取消按钮时，不做任何操作
          this.$message({
            type: "info",
            message: "已取消更新",
          });
        });
    },
    commentSubmit() {
      this.count++;
      let saveCommentDm = {};
      saveCommentDm.moduleId = this.form.id;
      saveCommentDm.comment = this.comment;
      saveComment(saveCommentDm).then((response) => {
        listComment(this.form.id).then((response) => {
          this.commentList = response.data;
          this.$nextTick(() => {
            let table = document.getElementById("dialog");
            table.scrollTop = table.scrollHeight;
            this.comment = "";
          });
        });
      });
    },
    handleDeleteComment(row) {
      deleteComment(row.id).then((response) => {
        listComment(this.this.taskId).then((response) => {
          this.commentList = response.data;
        });
      });
    },
    initTask() {
      this.loading = true;
      detailResources().then(response => {
        this.user = response.data;
        let str = response.data.nickName
        this.userLogo = str.charAt(0);
      });
      getTask(this.taskId).then((response) => {
        response.data.startDate = moment(
          new Date(response.data.startDate)
        ).format("YYYY-MM-DD");
        response.data.endDate = moment(new Date(response.data.endDate)).format(
          "YYYY-MM-DD"
        );
        let array = response.data.collaboratorUserList.map(
          (item) => item.nickName
        );
        response.data.collaboratorUserNames = array.join(", ");
        this.form = response.data;
        this.open = true;
        this.title = "任务信息";
        listComment(this.taskId).then((response) => {
          this.commentList = response.data;
          this.$nextTick(() => {
            let table = document.getElementById("dialog");
            table.scrollTop = 0;
          });
          this.loading = false;
        });
      });
    },
  },
};
</script>
<style lang="scss">
  .dialog-comment-input {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
.dialog-task-info {
  .el-descriptions-item__container .el-descriptions-item__label,
  .el-descriptions-item__container .el-descriptions-item__content {
    align-items: center;
    font-size: 16px;
  }
}
.box-card {
  margin-bottom: 10px;
}
  .dialog-comment-info {
    margin: 0px;
    padding: 0px;
    list-style: none;

    .infinite-list-item {
      display: flex;
      margin-bottom: 10px;
    }
  }
  .comment-left {
    width: 50px;
  }
  .comment-right {
    width: calc(100% - 60px);
    display: flex;
    flex-direction: column;

    .comment-right-title {
      height: 40px;
      align-content: center;
      font-size: 16px;
    }

    .comment-right-body {
    }

    .comment-right-footer {

    }
  }
</style>
